<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <title>AUTH</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="../css/bootstrap.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="../js/jquery-1.9.1.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
        <!--[if IE]><meta http-equiv="imagetoolbar" content="no"><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script><![endif]-->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
		<script>
			function NoticeMessage(msg){
				$('#NoticeMessage .dialog-modal-content').html(msg);
				$('#NoticeMessage,.dialog-modal-marker').fadeIn();
			}
			function WarningMessage(msg){
				$('#WarningMessage .dialog-modal-content').html(msg);
				$('#WarningMessage,.dialog-modal-marker').fadeIn();
			}
			function CloseMessage(){
				$('.dialog-modal-dialog,.dialog-modal-marker').fadeOut();
			}
		</script>
    </head>
	<body>
		<div class="dialog-modal-marker" onclick="CloseMessage();"></div>
        <div id="NoticeMessage" class="dialog-modal-dialog" >
            <div class="dialog-modal-header">
                <i class="ico-warning"></i>
                NOTICE MESSAGE
                <i class="ico-close pull-right" onclick="CloseMessage();" ></i>
            </div>
            <div class="dialog-modal-content">
                MESSAGE HERE
            </div>
            <div class="dialog-modal-footer">
                <p style="cursor: pointer;margin: 0;padding: 0" onclick="CloseMessage();">OK</p>
            </div>
        </div>
        <div id="WarningMessage" class="dialog-modal-dialog" >
            <div class="dialog-modal-header">
                <i class="ico-error"></i>
                ERROR MESSAGE
                <i class="ico-close pull-right" onclick="CloseMessage();" ></i>
            </div>
            <div class="dialog-modal-content">
                MESSAGE HERE
            </div>
            <div class="dialog-modal-footer">
                <p style="cursor: pointer;margin: 0;padding: 0" onclick="CloseMessage();">OK</p>
            </div>
        </div>
		<div class="left-banner -container col-md-4">
			<div class="row">
				<div class="banner">
					<div class="slogan">
						<div>
							<h2>Join For Free</h2>
							<div>Already have an account? <a href="login.html">Log in now</a></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right-content -container col-md-8">		
			<div class="row">
				<div class="col-sxs-12">
					<h3 class="auth-title hidden-xs">Log In to your Lief Account</h3>
					<div class="visible-xs">&nbsp;</div>
				</div>
				
				<div class="col-sxs-6 doubleprefix col-md-12">
					
						<div class="col-sxs-12 visible-xs">
							<h3 class="auth-title">Log In to your Lief Account</h3>
						</div>
					<div style="max-width:320px;margin:0 auto">
						<div class="reg-form">
							<div class="input-group">
								  <input type="text" class="form-control" placeholder="Email">
							</div>
							<div class="input-group">
								  <input type="text" class="form-control" placeholder="Password">
							</div>
							
							<div class="input-group">
								<button style="width: 100%" class="btn btn-default" type="button"
									onclick="NoticeMessage('Username doest exist or password invalid !.');"
								>Login</button>
							</div>
							
							<div class="input-group">
								<div style="text-align:center">
									<a href="">Can't access </a>your account ? <a href="auth.html">Register </a>
								</div>
							</div>
							
						</div>
					</div>
				</div>
				<div class="col-sxs-6 doubleprefix hidden-md hidden-lg hidden-xs">
					<div class="auth-video" style="margin-bottom:15px">
						<img src="http://lamtest.otherearth.com/img/module/lief/skin-2014/video.jpg"
							style="width:100%"
							alt=""
							/>
					</div>
					
				</div>
				<div class="clear"></div>
				<div class="-row col-md-12">
						<div class="auth-title-second">You could also login with</div>
						<div class="col-md-6" style="margin-bottom:15px">
							<div class="fbbtn socialbtns">Sign in with Facebook</div>
						</div>
						<div class="col-md-6" style="margin-bottom:15px">
							<div class="ttbtn socialbtns">Sign in with Twitter</div>
						</div>
						<div class="col-md-6" style="margin-bottom:15px">
							<div class="libtn socialbtns">Sign in with Linkedin</div>
						</div>
					</div>
			</div>
			<div class="foot" style="border-top:1px solid #ccc;margin-top:15px;">
				<div class="container">	
					<div class="row">
						<div class="col-sxs-4 foot-group">
							<div class="foot-name">About us</div>
							<ul>
								<li><a href="#">Contact us</a></li>
								<li><a href="#">Media info</a></li>
								<li><a href="#">Our videos</a></li>
							</ul>
						</div>
						<div class="col-sxs-4 foot-group">
							<div class="foot-name">Help</div>
							<ul>
								<li><a href="#">How Lief works?</a></li>
								<li><a href="#">FAQ</a></li>
							</ul>
						</div>
						<div class="col-sxs-4 foot-group">
							<div class="foot-name">Legal information</div>
							<ul>
								<li><a href="#">Terms of use</a></li>
								<li><a href="#">Privacy</a></li>
							</ul>
						</div>
					</div>
				</div>
	